<template>
	<view class="page">
		<view class="page-box" :style="{textAlign: !userInfo ? 'left' : 'center'}">
			<view class="" v-if="userInfo">
				<u-avatar v-if="userInfo.avatar" :src="userInfo.avatar" size="100" />
				<u-avatar v-else size="100" />
				<view style="color: #193980;" v-if="userInfo.username">
					{{ userInfo.username }}
				</view>
			</view>

			<view class="btnBox" v-if="userInfo">
				<view class="choose-nickname-row" style="height: 44%;">
					<input v-model="form.password" type="text" placeholder="请输入登录密码" password class='codeinput' />
				</view>
			</view>

			<view class="btnBox" v-if="!userInfo" style="height:400rpx;">
				<image class="tex" src="@/static/login/login.png" mode=""></image>

				<view class="choose-nickname-row">
					<input v-model="form.mobile" type="number" placeholder="请输入账号" />
				</view>

				<view class="choose-nickname-row">
					<input v-model="form.password" type="text" placeholder="请输入密码" password />
				</view>
				<view class="" style="display: flex;">
					<view class="noCode">
						<view class="">无账号,</view>
						<view class="forgetCode" style="width: 40%;margin-top: 0;" @tap.stop="toRegister">注册?</view>
					</view>
					<view class="forgetCode" style="width: 71%;" @tap.stop="toForgetCode"> 忘记密码？ </view>
				</view>
			</view>
			<view class="proGroup">
				<view class="left">
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox :checked="checked" :value="checked" shape="circle" active-color="#000"
							label-disabled>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="right">
					<view class="first">
						我已阅读并同意
					</view>
					<view class="second">
						<view class="Code" @tap.stop="Jump('zcxy')">《注册协议》</view>和
						<view class="Code" @tap.stop="Jump('ysxy')">《隐私协议》</view>
					</view>
				</view>
			</view>
			<button class="button" size="mini" @tap.stop="handleLogin">登录</button>
			<view class="forgetCode" @tap.stop="toForgetCode" v-if="userInfo"> 忘记登录密码？ </view>
		</view>
	</view>
</template>

<script>
	import {
		weixinLogin,
		myProInfo,
		myPhone,
		userLogin
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				checked: false,
				showPop: false, // 完善信息
				userInfo: {}, // 用户信息
				mobile: "", // 手机号码
				token: "",
				cardList: [], // 会员列表
				form: {
					mobile: '',
					password: '',
				},
			};
		},
		created() {
			console.log(uni.getStorageSync('userInfo'), 'this.Info')
			this.userInfo = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : ''
			if (this.userInfo.mobile) this.form.mobile = this.userInfo.mobile
			
			// this.getMemberList();
		},
		methods: {
			checkboxChange() {
				this.checked = !this.checked
			},
			// 跳转协议
			Jump(type) {
				uni.navigateTo({
					url: '/pages/my/agreement?name=' + type
				})
			},
			// 忘记密码
			toForgetCode() {
				uni.navigateTo({
					url: '/pages/bind/forgetCode'
				})
			},
			// 注册
			toRegister() {
				uni.navigateTo({
					url: '/pages/bind/register'
				})
			},
			// 关闭授权弹窗
			cencelPopup(v) {
				this.showPop = false;
			},
			// 登录
			handleLogin() {
				if (!this.checked) {
					uni.showToast({
						title: '请阅读勾选注册协议与隐私协议',
						duration: 1500,
						icon: 'none',
					})
					return
				}
			
				if (this.form.mobile == '') {
					uni.showToast({
						title: '请输入账号',
						duration: 1500,
						icon: 'none',
					})
					return
				} else if (this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 1500,
						icon: 'none',
					})
					return
				}

				weixinLogin(this.form).then((res) => {
					if (res.code == 200) {
						uni.setStorageSync("userInfo", JSON.stringify(res.data.userinfo));
						uni.setStorageSync("token", res.data.userinfo.token);
						uni.showToast({
							title: '登录成功',
							duration: 1500,
							icon: 'none',
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabBar/homeIndex'
							})
						}, 1000);
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});
			},
			// 获取code
			getPhoneNumber(e) {
				let data = {
					code: e.detail.code,
				};
				myPhone(data).then((res) => {
					if (res.code == 1) {
						this.mobile = res.data.mobile;
						this.handleLogin();
					}
				});
			},
			// 获取会员信息
			getMemberList() {
				myMemberCard().then((res) => {
					if (res.code == 1) {
						res.data.forEach((i) => {
							i.cover_img = i.cover_img || this.webSrc("/assets/web_img/my/member1.png");
						});
						this.cardList = res.data;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.proGroup {
		display: flex;
		margin-top: 50rpx;

		.left {
			width: 52rpx;
		}

		.right {
			flex: 1;
			display: flex;

			.first {
				color: #909090;
				font-size: 26rpx;
				width: 32%;
			}

			.second {
				display: flex;
				color: #909090;
				font-size: 26rpx;

				.Code {
					color: #466EC5;
					width: 99%;
					font-size: 26rpx;
				}
			}
		}
	}

	.page {
		background: url(@/static/bg.png);
		background-size: 100% 100%;
		height: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;

		&-box {
			height: 900rpx;
			margin: 140rpx auto;
			width: 640rpx;
			display: flex;
			flex-direction: column;
			justify-items: center;

			>view {
				margin-bottom: 50rpx;
			}

			.btn {
				font-size: 28rpx;
				background-color: #fff;
				border: 1rpx solid #dddddd;
				padding: 20rpx;
				border-radius: 8rpx;

				&:active {
					background-color: #f2f2f2;
				}
			}
		}
	}

	/deep/ .u-avatar {
		margin: 0 auto;
		margin-bottom: 40rpx;
	}

	.button {
		background-color: #466EC5;
		width: 100%;
		color: #fff;
		border-radius: 40rpx;
		height: 88rpx;
		line-height: 82rpx;
		font-size: 30rpx;
		margin-top: 70rpx;
	}

	.forgetCode {
		color: #466EC5;
		width: 99%;
		font-size: 26rpx;
		text-align: right;
		margin-top: 20rpx;
	}

	.noCode {
		color: #909090;
		font-size: 26rpx;
		margin-top: 20rpx;
		display: flex;
		width: 28%;
		justify-content: space-between;
	}

	.btnBox {
		width: 100%;
		height: 120rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		.tex {
			width: 140rpx;
			height: 86rpx;
			margin-bottom: 40rpx;
		}

		.choose-nickname-row {
			width: 100%;
			height: 15%;
			padding: 62rpx 4rpx 7rpx;
			text-align: left;
			font-size: 30rpx;
			margin: 0 auto;
			border-bottom: 1px solid #F2F2F2;

			.input {
				color: #807E7E;
			}
		}
	}
</style>
